<template>
  <div class="bg-white rounded-lg p-5 h-full">
    <div class="font-bold text-lg mb-4">查看记分类型表</div>
    <el-button type="primary" @click="addRow">添加</el-button>
<!--    <div class=" rounded bg-warning-1 text-warning-2 px-4 py-1 text-sm my-2 ">
      单击单元格选中
    </div>-->


    <el-table
      class="mt-4"
      highlight-current-row
      @current-change="handleCurrentChange"
      :data="dataList"
      border
    >
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column prop="score" label="记分数值" />
      <el-table-column prop="reason" label="记分原因" />
      <el-table-column
        label="操作"
        align="center"
        class-name="fixed-width"
        width="350"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editRow(scope.row)"
          >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="deleteRow(scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList"
    />
    <hr class="my-4"  />
    <div>
<!--      <el-button type="primary" @click="submit">确认</el-button>-->
      <el-button @click="goBack">返回</el-button>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
        <el-form-item label="记分" prop="score">
          <el-input-number
            style="width: 240px"
            v-model="editForm.score"
            min="1"
            placeholder="请输入记分"
          />
        </el-form-item>
        <el-form-item label="记分原因" prop="reason">
          <el-input
            type="textarea"
            style="width: 240px"
            v-model="editForm.reason"
            placeholder="请输入记分原因"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="saveScore()">确 定</el-button>
    </span>
    </el-dialog>
  </div>


</template>

<script>
import {
  addScoringTypeAPI,
  getScoreById,
  getScoringTypeListAPI,
  scoreEdit,
  scoreRemoveByIds
} from '@/api/zhangping/health-care/org-scoring'
export default {

  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      currentRow: null,
      dataList: [],
      queryParams:{
        recordType:this.$store.state.hospital.recordType,
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,
      open: false,
      title: '编辑',
      editForm:{
        reason:null,
        score:null
      },
      rules: {
        score: [
          {
            required: true,
            message: "请输入记分",
            trigger: "change",
          },
        ],
        reason: [
          {
            required: true,
            message: "请输入原因",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDataList();
  },
  mounted() {},
  methods: {
    goBack() {
      const type  = this.$store.state.hospital.recordType ==0?'org':'doctor'
      this.$router.push({ path: `/health-care/${type}-scoring-edit`});
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    toAddPage() {

      this.$router.push({ path: "/health-care/org-scoring-type-edit" });
    },
    submit() {
      console.log(this.currentRow);
      if(this.currentRow == null){
        this.$message.error("请选择一条数据");
        return;
      }
      const {reason,score} = this.currentRow
       const type  = this.$store.state.hospital.recordType ==0?'org':'doctor'
      this.$router.push({ path: `/health-care/${type}-scoring-edit`, query: {reason,score} });
    },
    getDataList() {
      this.loading = true;

      getScoringTypeListAPI(this.queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    addRow() {
      this.open = true;
      this.title = '新增';
      this.editForm = {
      }

    },
    editRow(row) {
      this.open = true;
      this.title = '编辑';
      getScoreById(row.id).then((res) => {
        this.editForm = res.data;
      })
    },
    deleteRow(row) {
      this.$confirm("确定删除该条数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 执行删除操作
        const ids = [row.id];
        scoreRemoveByIds(ids).then((res) => {
          this.$message.success("删除成功");
          this.getDataList();
        }).catch((error) => {
        })
      })
    },
    saveScore(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.editForm.recordType = this.$store.state.hospital.recordType;
          // 执行保存操作
          if ( this.editForm.id) {
            // 更新操作
            scoreEdit(this.editForm).then((res) => {
              this.getDataList();
              this.$message.success("保存成功");
              this.open = false;
            })
          } else {
            // 新增操作
            addScoringTypeAPI(this.editForm).then((res) => {
              this.getDataList();
              this.$message.success("保存成功");
              this.open = false;
            })
          }

        }
      });
    }
  },
};
</script>

<style scoped lang="scss"></style>
